<template> <!-- 发货记录-->
	<view class="wrap">
		<js-error mode="bottom" ref="jsError"></js-error>
		<view class="search">
			<u-search @click="show = true" :show-action="false" placeholder="搜索" :disabled="true"></u-search>
		</view>
		<view>
			<u-popup v-model="show" mode="top" length="60%">
				<view class="text-blue padding-left-sm padding-top-sm" style="font-size: 18px;">
					<u-icon name="/static/common/img/find.png" size="64"></u-icon>
					<text class=" padding-left-sm text-blue">查询条件</text>
				</view>
				<u-form class="form" :model="query" ref="uForm" label-position="left">
					<u-form-item class="text-bold" label="发货车次:" prop="djNo" label-width="200">
						<u-input placeholder="请输入发货车次" v-model="query.djNo" type="text" maxlength="200"></u-input>
					</u-form-item>
					<u-form-item class="text-bold" label="车牌号:" prop="carNo" label-width="200">
						<u-input placeholder="请输入车牌号" v-model="query.carNo" type="text" maxlength="200"></u-input>
					</u-form-item>
					<u-form-item class="text-bold" label="开始发货日期" prop="time" label-width="200">
					    <u-input placeholder="请输入开始发货日期" v-model="query.planDate_gte" type="select" :select-open="startTime" @click="startTime = true"></u-input>
					</u-form-item>
					<u-form-item class="text-bold" label="开始发货日期" prop="time" label-width="200">
					    <u-input placeholder="请输入开始发货日期" v-model="query.planDate_lte" type="select" :select-open="endTime" @click="endTime = true"></u-input>
					</u-form-item>
					<u-form-item class="text-bold" label="状态:" prop="cstatus" label-width="200">
						<js-select v-model="query.cstatus" dict-type="mf_plan_status" placeholder="请选择状态"></js-select>
					</u-form-item>
					<u-picker mode="time" v-model="startTime" @confirm="startConfirm"></u-picker>
					<u-picker mode="time" v-model="endTime" @confirm="endConfirm"></u-picker>
				</u-form>
				<view class="footer">
					<u-button class="btn" type="primary" @click="submit">查询</u-button>
				</view>
			</u-popup>
		</view>
		<scroll-view class="scroll-list" scroll-y="true" @scrolltolower="loadMore">
			<u-swipe-action v-for="(item, index) in list" :key="item.id" :index="index">
				<view class="flex">
					<!-- <view class="padding-lg margin-xs radius" style="position: relative;"><text class="text-bold"><text class="text-red">{{index+1}}、</text>发货车次：{{item.djNo}}</text>
						<u-icon name="/static/common/img/upload.png" @click="toFj(item)" class="upload" size="40"></u-icon>
						<u-icon name="/static/common/img/delData.png" @click="delData(item.id)" class="rights" style="" size="30"></u-icon>
					</view><br/> -->
					<view class="basis-xs">{{index+1}}、发货车次：</view>
					<view class=" bg-grey padding-sm margin-xs radius">{{item.djNo}}</view>
				</view>
				<view class="flex p-xs margin-bottom-sm mb-sm">
					<view class="basis-xs">车牌号：</view>
					<view class=" bg-grey padding-sm margin-xs radius">{{item.carNo}}</view>
				</view>
				<view class="flex p-xs margin-bottom-sm mb-sm">
					<view class="basis-xs">车牌号：</view>
					<view class="bg-grey padding-sm margin-xs radius">center</view>
				</view>
				<view style="border-bottom: 2px solid #000000;"></view>
			</u-swipe-action>
			<view class="loadmore" @click="loadMore">
				<u-loadmore :status="loadStatus"></u-loadmore>
			</view>
		</scroll-view>
		<!-- <view class="btn-plus" @click="navTo('form')">
			<u-icon name="plus-circle-fill" size="90" color="#3d87ff"></u-icon>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keywords:'',
				query: {
					status: '',
					pageNo: 1,
					pageSize: 20
				},
				list:[],
				loadStatus: 'loadmore',
				show: false,
				type:'text',
				startTime: false,//控制日期显示
				endTime: false,//控制日期显示
			}
		},
		onLoad() {
			this.loadList();
		},
		methods: {
			//跳转详情页面上传图片
			toFj(model) {
				const that=this
				uni.navigateTo({
				  url: '/pages/mf/fh/fhfj?model='+JSON.stringify(model),
				  events: {
				    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
				    Filter(data) {
						
				    }
				  },
				  success: function(res) {
				    // 通过eventChannel向被打开页面传送数据
				    // res.eventChannel.emit('initfilter', that.filter)
				  }
				})
			},
			startConfirm(e){
				this.query.planDate_gte = e.year + '-' + e.month + '-' + e.day;
			},
			endConfirm(e){
				this.query.planDate_lte = e.year + '-' + e.month + '-' + e.day;
			},
			loadMore() {
				this.loadStatus = "loading";
				setTimeout(() => {
					this.query.pageNo += 1;
					this.loadList();
				}, 100);
			},
			search(value) {
				this.list = [];
				this.query.pageNo = 0;
				this.loadList();
			},
			loadList() {
				this.$u.api.mffh.findList(this.query).then(res => {
					if (!res.list || res.list.length == 0){
						this.loadStatus = "nomore";
						return;
					}
					this.list = res.list;
					this.count = res.count;
					this.query.pageNo = res.pageNo;
					this.query.pageSize = res.pageSize;
					this.loadStatus = "loadmore";
				})
			},
			delData(id){
				this.query.id = id;
				uni.showModal({
					title: '删除提示',
					content: '是否删除此计划？',
					confirmColor:'#F54E40',
					 success: (res)=> {
						if(!res.confirm){
							this.isdisabled=true
							return false;
						}
						this.$u.api.mffh.delete(this.query).then(res => {
							if(res.result){
								this.$u.toast("删除成功！");
							}else{
								this.$refs.jsError.showError('',res.message,'error');
							}
							this.query.id = ''
							this.list = [];
							this.query.pageNo = 0;
							this.loadList();
						})
					}
				})
			},
			delDetail(id){
				this.query.id = id;
				uni.showModal({
					title: '删除提示',
					content: '是否删除此详情？',
					confirmColor:'#F54E40',
					 success: (res)=> {
						if(!res.confirm){
							this.isdisabled=true
							return false;
						}
						this.$u.api.mffh.delDetail(this.query).then(res => {
							if(res.result=="true"){
								this.$u.toast("删除成功！");
							}else{
								// this.$u.toast(res.message);
								this.$refs.jsError.showError('',res.message,'error');
							}
							this.query.id = ''
							this.list = [];
							this.query.pageNo = 0;
							this.loadList();
						})
					}
				})
			},
			optionsClick(rowIndex, btnIndex) {
				let row = this.list[rowIndex];
				if(btnIndex == 0) {
					bpmUtils.navTrace(this, 'formKey=leave&bizKey=' + row.id);
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			submit() {
				this.list = [];
				this.loadList();
				this.show = false
			},
			
		}
	}
</script>

<style>
.tableclass{
	border-left: 1px solid rgb(228, 231, 237);
	border-top: 1px solid rgb(228, 231, 237);
	background-color: rgb(255, 255, 255);
	width: 100%;box-sizing: border-box;
}
.thclass {
	text-align: center;
	padding: 5px 3px;
	border-bottom: 1px solid rgb(228, 231, 237);
	border-right: 1px solid rgb(228, 231, 237);
	flex-direction: column;
	flex: 1;
	justify-content: center;
	font-size: 14px;
	color: #303133;
	font-weight: bold;
	background-color: #f5f6f8;
}
.trclass {
	height: 52px;
}
.tdclass {
	padding: 5px 3px;
	border-bottom: 1px solid rgb(228, 231, 237);
	border-right: 1px solid rgb(228, 231, 237);
	flex-direction: column;
	flex: 1;
	justify-content: center;
	font-size: 14px;
	color: #505256;
	align-self: stretch;
	box-sizing: border-box;
	height: 100%;
}
.box .item{
	margin: 0 0px 0px;
}
.tui-line-cell {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	.tui-title {
		line-height: 32rpx;
		min-width: 120rpx;
		flex-shrink: 0;
	}
	
	.tui-input {
		font-size: 32rpx;
		color: #333;
		padding-left: 20rpx;
		flex: 1;
		overflow: visible;
	}
.footer {
	position: fixed;
	left: 0;
	bottom: 20px;
	width: 100%;
	
}
.upload {
	position: absolute;
	right: 65rpx;
	top: 0;
	margin-right: 0;
}
.rights {
	position: absolute;
	/* display: inline-block; */
	right: 0;
	top: 0;
	margin-right: 0;
	/* width: 100%; */
	
}
</style>
